<template>
  <div class="app-container foundation">
    <div class="title">
      <h3>信箱管理</h3>
      <span>用于管理小区里业主的信箱信息，包括工作建议，意见反馈等。(app端过来的数据)</span>
    </div>
    <el-card>
      <search ref="refSearch" />
    </el-card>
    <div style="padding: 10px 0">
      <el-card v-loading="loading">
        <el-row type="flex" justify="end" align="middle" style="padding: 10px">
          <i class="el-icon-refresh-right icon" @click="getMailbox" />
          <i class="el-icon-upload2 icon" />
          <i class="el-icon-setting icon" />
        </el-row>
        <!-- 表单 -->
        <el-table :data="list" stripe style="width: 100%">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="community.name" label="小区名称" />
          <el-table-column prop="title" label="信件标题" />
          <el-table-column prop="member.name" label="发信人" />
          <el-table-column prop="brand" label="状态">
            <template slot-scope="{row}">{{ +row.status === 1 ? '已读回复' :'未读' }}</template>
          </el-table-column>
          <el-table-column prop="buy_time" label="购买日期">
            <template slot-scope="{ row }">
              {{ row.create_time | formatDate }}
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" label="操作">
            <template slot-scope="{ row }">
              <el-button
                :disabled="!checkBtnPermission('/service/mailbox', 'update')"
                type="text"
                @click="drawerTrue(row.id)"
              >查看并回复</el-button>
              <el-button type="text" :disabled="!checkBtnPermission('/service/mailbox', 'destroy')" @click="delBmit(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <!-- 分页 -->
        <el-row type="flex" justify="end">
          <el-pagination
            :page-sizes="[5,10, 15, 20, 30]"
            :page-size="formData.pageSize"
            :current-page="formData.current"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 抽屉 -->
    <!-- <el-drawer title="我是标题" :visible.sync="drawer" show-close size="50%" class="drawer"> -->
    <add-from ref="refAdd" class="refAdd" />
    <!-- </el-drawer> -->
  </div>
</template>

<script>
import {
  getMailbox,
  delMailbox,
  editMailbox
} from '@/api/service/mailbox'
import { getCommunity } from '@/api/device/device'
import search from '@/views/service/components/mailbox/search.vue'
import AddFrom from './components/mailbox/addFrom.vue'
export default {
  name: 'VueAdminTemplateMasterIndex',
  components: {
    search,
    AddFrom
  },
  data() {
    return {
      // 获取表单
      formData: {
        current: 1,
        pageSize: 10,
        create_time: ''
      },
      // 组件下拉数据
      componentsData: [],
      // 加载
      loading: false,
      // 表单数据
      list: [],
      // 总数量
      count: 0,
      imges: require('@/assets/images/bgImg.db418f95.jpg')
    }
  },
  created() {
    this.getMailbox()
  },
  mounted() {
    this.getCommunity()
  },

  methods: {
    // 打开抽屉
    drawerTrue(id) {
      this.$refs.refAdd.drawer = true
      this.$nextTick(async() => {
        // 获取详情
        // 此处存在pug增加也默认获取到了值
        // 所有要判断得到的数据是否是id
        const res = await editMailbox(id)
        console.log(res)
        this.$refs.refAdd.formData = res.data.data
        // 下拉
        this.$refs.refAdd.list = this.componentsData
      })
    },
    // 表单重置
    resetting() {
      this.formData = {
        current: 1,
        pageSize: 5
      }
      this.getMailbox()
    },
    // 获取下拉框数据
    async getCommunity() {
      const res = await getCommunity()
      this.componentsData = res.data.data
      this.$refs.refSearch.list = this.componentsData
      // this.$refs.refAdd.list = res
    },
    // 获取表单数据
    async getMailbox() {
      this.loading = true
      const res = await getMailbox({ ...this.formData })
      console.log(res.data.data.count)
      this.count = res.data.data.count
      this.list = res.data.data.rows
      this.loading = false
    },
    // 点击切换页数
    handleCurrentChange(val) {
      this.formData.current = val
      this.getMailbox()
    },
    // 点击切换数量
    handleSizeChange(val) {
      this.formData.pageSize = val
      this.getMailbox()
    },
    // 删除
    async delBmit(id) {
      await this.$confirm('是否删除数据', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delMailbox(id)
      this.$message('删除成功')
      this.getMailbox()
    }
  }
}
</script>

<style lang="scss" scoped>
body {
  overflow: auto;
}
.foundation {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  .iamge {
    text-align: center;
    height: 100px;
  }
  .icon {
    cursor: pointer;
    font-size: 24px;
    margin: 0 10px;
  }
}
img {
  width: auto;
  height: 100px;
}
</style>
